<template >
  <div>
    <h1>微信jssdk</h1>
        <button @click="scanQr">扫码</button>
        <p>扫码结果: {{scanRsText}}</p>
        <button @click="selectPhotos">选择图片</button>
    <ul class="imgList">
      <li v-for="m in imgList" :key="m">
        <img style="width: 100px; height: 100px" :src="m" alt="" />
      </li>
    </ul>
      <button @click="startRec" :disabled="recIng">开始录音</button> 
      <br>
      <br>
        <button @click="stopRec">结束录音</button>
        <p>录音转换结果: {{recRsText}}</p>
  </div>
</template>

<script>
import axios from 'axios'
const serveHost = 'http://www.bufantec.com'
const appid = `wxc48cd51ac86c9608`
export default {
  data() {
    return {
      imgList: [] ,//图片列表
       scanRsText: '', //录音转化后的文字
            recIng: false, // 是否正在录音
            recRsText: '', // 录音转换文字结果
            scanRsText:''
    }
  },
  created() {
  var referer = window.location.href; //获取当前页面的地址
    var url = `${serveHost}/wx/user/getAccessToken?appId=${appid}&referer=${referer}`
    axios.get(url).then((res) => {
      console.log(res)
      var options = res.data
      this.initWxConfig(options)
    })
  },
  methods: {
    initWxConfig({ appId, noncestr, timestamp, signature }) {
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId, // 必填，公众号的唯一标识
        timestamp, // 必填，生成签名的时间戳
        nonceStr: noncestr, // 必填，生成签名的随机串
        signature, // 必填，签名
        jsApiList: ['chooseImage', 'updateAppMessageShareData','stopRecord','startRecord','translateVoice','scanQRCode'] // 必填，需要使用的JS接口列表
      })
        // 初始化分享
           this.initWxShare()
    },
            selectPhotos(){  //选择图片
            var that = this;
            // 打开微信的照片库或者相机
            wx.chooseImage({
                count: 9, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    // console.log(localIds);
                    that.imgList = localIds;
                }
            });
        },
            scanQr(){
            var that = this;
            wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                    that.scanRsText = result;
                }
            });
        }, 
           // 开始录音
        startRec(){
            this.recIng = true;
            wx.startRecord();
        }, 
        // 结束录音
        stopRec(){
            var that = this;
            wx.stopRecord({
                success: function (res) {
                    var localId = res.localId;
                    // 执行语音翻译
                    wx.translateVoice({
                        localId, // 需要识别的音频的本地Id，由录音相关接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            // alert(res.translateResult); // 语音识别的结果
                            that.recIng = false;
                            that.recRsText = res.translateResult;
                        }
                    });
                }
            });
        },
             initWxShare(){
            // 因为当前页面的分享目标 是在进入页面后立马确定的 而不是点击某个按钮后改变的(当然也可以)
            // 微信的页面分享按钮 是微信组件 不再当前页面的控制范围.  所以应该在用户点击分享按钮之前,就设置好当前页面的分享
            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({ 
                    title: '测试分享', // 分享标题
                    desc: '微信jssdk分享朋友列表测试', // 分享描述
                    link: 'http://s28r45.natappfree.cc/jssdk', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'https://bufan-apitown.oss-cn-beijing.aliyuncs.com/bftec/20210123121620075QQ图片20210123121337.jpg', // 分享图标
                    success: function () {
                        alert('设置成功!')
                    }
                })
            }); 
        }
  }
}
</script>

<style lang="scss" scoped>
.imgList {
  list-style: none;
}
</style>